<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <style>
        .box{
            width:90%;
            min-height:300px;
            border:1px solid yellowgreen;
            border-radius: 10px;
            overflow: auto;
            padding:20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>
        <my-head></my-head>

        <!-- 5. 路由出口 显示组件的出口 -->
        <router-view class="box"></router-view>

        <!-- 6.声明式 导航 -->
        <p>
            <router-link to="/home?uname=dio&id=999#level99">首页1</router-link>
            <router-link :to="{name:'home',hash:'#level3',query:{uname:'raq',id:1212}}">首页2</router-link>

            <router-link to="/find/WuHan/东湖?time=999">发现1</router-link>
            <router-link :to="{name:'find',query:{time:555},params:{address:'sz',title:'bsk'}}">发现2</router-link>

            <router-link to="/my?phone=121212121212&age=18">我的1</router-link>
            <router-link :to="{name:'mine',query:{phone:131213131312,age:18}}">我的2</router-link>

            <router-link to="/user/学生">用户-学生</router-link>
            <router-link :to="{name:'user',params:{role:'讲师'}}">用户-讲师</router-link>

            <router-link to="/user/admin">管理员1</router-link>
            <router-link :to="{name:'admin'}">管理员2</router-link>

            <router-link to="/news/1">热点新闻</router-link>
            <router-link :to="{name:'news',params:{type:2}}">最新新闻</router-link>


        </p>


    </div>

    <template id="myhead">
        <div>
            <h2>header---</h2>
        </div>
    </template>

    <template id="home">
        <div>
            <h2>Home--首页</h2>
            <h2>获取query参数 (路由查询参数 ? 拼接)</h2>
            <h2>uname---{{$route.query.uname}}</h2>
            <h2>id--{{$route.query.id}}</h2>
            <h2>路由的名称name---{{$route.name}}</h2>
            <h2>绝对路径path---{{$route.path}}</h2>
            <h2>全部路径fullPath---{{$route.fullPath}}</h2>
            <h2>hash---{{$route.hash}}</h2>
            <h2>meta(路由标记信息)---{{$route.meta}}</h2>
        </div>
    </template>

    <template id="find">
        <div>
            <h2>Find--发现</h2>
            <h2>获取params 参数 (路由参数 : 声明)</h2>
            <h2>address=={{$route.params.address}}</h2>
            <h2>title=={{$route.params.title}}</h2>
            <h2>获取query参数(路由查询参数 ? 拼接)</h2>
            <h2>time--{{$route.query.time}}</h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>Mine--个人中心</h2>
            <h2>phone--{{$route.query.phone}}</h2>
            <h2>age--{{$route.query.age}}</h2>
        </div>
    </template>

    <template id="user">
        <div>
            <h2>User--用户</h2>
            <h2>身份--{{$route.params.role}}</h2>
        </div>
    </template>

    <template id="news">
        <div>
            <h2>News--新闻</h2>
            <h2>新闻--{{$route.params.type==1?'热点新闻':'最新新闻'}}</h2>
        </div>
    </template>


    <script>
        //组件
        Vue.component('MyHead', {
            template: '#myhead'
        })

        //0 模块化编程  Vue.use(VueRouter)

        //1.定义（路由）组件
        const Home = {
            template: '#home',
            mounted() {

            },
            data() {
                return {

                }
            }
        }
        const Find = {
            template: '#find'
        }
        const Mine = {
            template: '#mine'
        }
        const User = {
            template: '#user'
        }
        const News = {
            template: '#news'
        }
        const NotFound = {
            template: '<h2>404---NotFound</h2>'
        }

        //2.定义路由匹配规则（Path && Component）
        const routes = [
            {
                path: '/',
                redirect: '/home',
            },
            {
                path: '/home',
                component: Home,
                name: 'home',
                meta: {
                    isLogin: true,
                    username: 'Dio',
                    islive: true
                }
            },
            {
                path: '/find/:address/:title?',  //params
                component: Find,
                name: 'find'
            },
            {
                path: '/mine',
                component: Mine,
                name: 'mine',
                // 路由别名  第二个名称   缺点 没有高亮  alias = '/administrator'
                alias: '/my'
            },
            {
                path:'/user/admin',
                component:{
                    template:'<h2>Admin--管理员</h2>'
                },
                name:'admin'
            },
            {
                path:'/user/:role',
                component:User,
                name:'user'
            },
            {
                path:'/news/:type',
                component:News,
                name:'news'
            },
            {
                path:'/404',
                component:NotFound,
                name:404,
                aliasL:'/notfound' //别名
            },
            {
                path:'*',
                redirect:{
                    name:'404'
                }
            }
        ]

        // 3.创建路由对象
        const router = new VueRouter({
            routes:routes,
        })


        const vm = new Vue({
        //4.挂载到根实例
            router, //this.$router 全局变量
        
            data: {
                title: '路由定义和路由传参',
            },
            watch: {
                '$route':function(to,from){
                    //即将进入的路由
                    console.log(to);
                    //即将离开的路由
                    console.log(from)
                }
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML = this.title;

                //全局路由对象  用于实现路由守卫  路由跳转和路由切换
                console.log(this.$router);
                // 当前激活的路由对象信息数据  获取路由参数 获取路由信息
                console.log(this.$route);
            }
        }).$mount('#app')
    </script>
    <!-- 
        Vue 路由是用来实现单页面应用的 
        routes 会根据不同的path 去映射不同的 组件  , 然后渲染组件到 router-view 

        动态路由  ==  路由参数传递   (动态路径参数)

        动态路由匹配  2中  ?id=1903  :(冒号)  
        a. ?id=1903  问号拼接的参数  表示查询参数  (search ?id=1903  ) (query id=1903)
        b. : 冒号声明    params    路由参数  
        /users/:uid    /users/1001  /users/1002   $route.params.uid 
        /users/:uname?   /users/ming  /users/55k   $route.params.uname  
        ? 表示这个是一个未知的参数  三目    传     
        
        $route  路由对象属性    
        $route.query      个 key/value 对象，表示 URL 查询参数 (?)
        $route.params     一个 key/value 对象  获取路由参数   (:)   
        $route.name       当前路由的名称 
        $route.path       对应当前路由的路径，总是解析为绝对路径  
        $route.hash       当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
        $route.fullPath   完成解析后的 URL，包含查询参数和 hash 的完整路径
        $route.meta       路由标记信息  

        name 命名路由
        通过一个名称来标识一个路由  
        :to="{name:'users',params:{uid:1002}}"

        匹配优先级  
        同一个路径可以匹配多个路由     匹配的优先级就按照路由的定义顺序：
        谁先定义的，谁的优先级就最高    

        路由重定向   url 一定改变     
        www.baidu.com  ==>   www.zuozhaoxi.xom 
        { path:"*", redirect:{name:"404"}}

        路由别名  第二个名称   缺点 没有高亮  
        path =  '/admin'   
        alias = '/administrator'  

        router-link 的 高亮 path  
     -->
</body>

</html>